<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>UIkit 3</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="js/docs.js"></script>
        <style media="screen">

            .twitter-tweet { visibility: hidden; }
            .twitter-tweet:first-child { margin-top: 0 !important; }

            .tm-button-primary {
                box-shadow: 1px 1px 1px #0000001a;
                background: #fff;
                border: none;
                color: #2ba3d4 !important;
            }

            .tm-button-primary:hover {
                background: #82cff0;
                color: #fff !important;
                text-shadow: 0 1px 0 rgba(0,0,0,0.1);
                -webkit-transition: background-color .15s ease-in-out;
                transition: background-color .15s ease-in-out;
            }

            .tm-button-primary:focus,
            .tm-button-primary:active {
                background: #2e93bc;
                color: #fff !important;
                text-shadow: 0 1px 0 rgba(0,0,0,0.1);
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.15),
                            inset 0 -1px 0px rgba(0,0,0,0.05),
                            inset 1px 0px 0px rgba(0,0,0,0.05),
                            inset -1px 0px 0px rgba(0,0,0,0.05);
                transition: background-color .05s ease-in-out;
            }

            .tm-margin-logo {
                margin-left: 80px;
                margin-top: -4px;
                margin-bottom: -50px;
            }

            .tm-margin {
                margin-top: 30px;
                margin-bottom: 30px !important;
            }

            .uk-form input[type='text'],
            .uk-form input[type='email'] { border-color: transparent !important; }

            .tm-position {
                margin-bottom: 20px !important;
                text-align: left;
            }

            @media (min-width: 850px) {

                .tm-position {
                    position: absolute;
                    top: 10px;
                    right: calc(100% + 30px);
                    white-space: nowrap;
                }

            }

        </style>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">Get Started</a></li>
                    <li><a href="core.html">Core</a></li>
                    <li><a href="components.html">Components</a></li>
                    <li><a href="customizer.html">Customizer</a></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                    <li><a href="tutorials.html">Tutorials</a></li>
                    <li class="uk-active"><a href="uikit3.html">UIkit 3</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-section tm-section-color-1 tm-section-colored">
            <div class="uk-container uk-container-center uk-text-center">

                <img class="tm-margin-logo" src="images/logo_uikit3.svg" width="201" height="210" title="UIkit 3" alt="UIkit 3">

                <p class="tm-margin uk-text-large uk-width-medium-1-2 uk-container-center">
                    Sign up for news about the UIkit 3 Beta<br class="uk-hidden-small"> and stay up to date on its development
                </p>

                <form class="uk-form uk-width-medium-1-3 uk-container-center uk-text-left" method="post" action="http://newsletter.yootheme.com/form.php?form=1" onsubmit="return CheckForm(this);">

                    <div class="uk-form-row">
                        <div class="uk-form-controls"><input id="email" class="uk-form-large uk-width-1-1" type="text" name="email" value="" placeholder="Your Email Address" required /></div>
                    </div>

                    <div class="uk-form-row">
                        <div class="uk-form-controls"><input id="name" class="uk-form-large uk-width-1-1" type="text" name="CustomFields[1]" id="CustomFields_1_1" value="" placeholder="Your Name" required></div>
                    </div>

                    <div class="uk-form-row uk-text-center">
                        <button class="uk-button uk-button-large tm-button-primary">Subscribe</button>
                    </div>

                    <input type="hidden" name="format" value="h" />
                </form>

            </div>
        </div>

        <div class="tm-section tm-section-color-white">
            <div class="uk-container uk-container-center">

                <h1 class="uk-article-title uk-text-center uk-margin-large-bottom">The latest sneak peeks</h1>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Nav</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">UIkit 3 offers two more navigation modifiers to choose from: Center and Primary <a href="https://t.co/r7zpxEuqjp">pic.twitter.com/r7zpxEuqjp</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/789075738423156736">October 20, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">List</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">There is a new list modifier in UIkit 3 for… *drumroll* …bullet points! <a href="https://t.co/aBv09zQUbJ">pic.twitter.com/aBv09zQUbJ</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/788722323759259648">October 19, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Search</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Display your search field in a modal with UIkit 3. Really, really big! 😁 <a href="https://t.co/mfpGEExmLt">pic.twitter.com/mfpGEExmLt</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/788348504146055169">October 18, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-display-inline-block">
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Display the search as overlay in the navbar with UIkit 3 🕵🏽 <a href="https://t.co/ZwHmKLC28V">pic.twitter.com/ZwHmKLC28V</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/787994171529396224">October 17, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-display-inline-block">
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">In UIkit 3, you can show the search box inside a dropbar. 👀 <a href="https://t.co/w0eU87EaMu">pic.twitter.com/w0eU87EaMu</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/786917624361918464">October 14, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-display-inline-block">
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">In UIkit 3 you can seamlessly integrate a search box in your navbars 🔍 <a href="https://t.co/PosLu6J7ZF">pic.twitter.com/PosLu6J7ZF</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/786545012288790530">October 13, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Badges and Labels</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Badges and labels in UIkit 3 are now two separate things and look even better than before <a href="https://t.co/7rbf2GjoG4">pic.twitter.com/7rbf2GjoG4</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/786202072932724736">October 12, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Width</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Mixing fixed-width and expanding content? Easy, with the new Width component in UIkit 3 <a href="https://t.co/cLdLxpoLZJ">pic.twitter.com/cLdLxpoLZJ</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/784010456839184384">October 6, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-display-inline-block">
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Any grid column number is possible with the new Width component in UIkit 3 🍾 <a href="https://t.co/dol0WP33Gz">pic.twitter.com/dol0WP33Gz</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/783628540726145024">October 5, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Grid</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The UIkit 3 grid is fully re-engineered. Any combination of column order, breakpoint, divider, wrapping or alignment is now possible. 💯 <a href="https://t.co/WCuneVA8BV">pic.twitter.com/WCuneVA8BV</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/783248112043393024">October 4, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Animation</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">New ✨animation✨ classes give you more control in UIkit 3 <a href="https://t.co/GnmypUQTcH">pic.twitter.com/GnmypUQTcH</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/781819633510809600">September 30, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Tab</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The tab component received a polished look and feel in UIkit 3. We ❤️ it. Do you? <a href="https://t.co/Iil6E3ep8G">pic.twitter.com/Iil6E3ep8G</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/781068909306900480">September 28, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Card</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Cards in UIkit 3 are the new panels. Add header and footer to make them look even cooler 🃏 <a href="https://t.co/dAQNQchUwC">pic.twitter.com/dAQNQchUwC</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/780740049725820928">September 27, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Off-canvas</div>
                        <blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Uikit 3 features three different ✨ animations ✨ for the Off-canvas component: Slide, Reveal and Push. The shading overlay is optional. <a href="https://t.co/xrcf1e1N4O">pic.twitter.com/xrcf1e1N4O</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/780371234848661504">September 26, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Inverse</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">.uk-dark { 😴 }<br>.uk-light { 😎 } <a href="https://t.co/cFQtHignB3">pic.twitter.com/cFQtHignB3</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/776428445102444545">September 15, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Progress</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The new Progress component styles the HTML &lt;progress&gt; element in UIkit 3 👻 <a href="https://t.co/3a7s1lpSpI">pic.twitter.com/3a7s1lpSpI</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/776034057289396224">September 14, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Container</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The new UIkit 3 Container component supports different widths — and adapts nicely to every breakpoint <a href="https://t.co/nvbOYiMPCV">pic.twitter.com/nvbOYiMPCV</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/775700943446929409">September 13, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Button</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">A new UIkit 3 button modifier comes with a smooth animation. Whoosh. 💫 <a href="https://t.co/ho4vYTvXJ8">pic.twitter.com/ho4vYTvXJ8</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/775316519710588928">September 12, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Navbar</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Best companions in UIkit 3: Beautiful background images and the new transparent navbar. 👭 <a href="https://t.co/aoBuPfl8xO">pic.twitter.com/aoBuPfl8xO</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/774243778295201792">September 9, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-display-inline-block">
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Say Hello to new dropbars in UIkit 3. Full-width dropdowns, no headphone jack. 😱 <a href="https://t.co/LzJwgrXPCo">pic.twitter.com/LzJwgrXPCo</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/773819411983634432">September 8, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-display-inline-block">
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">You can now build justified, multi-column dropdowns with the UIkit 3 Navbar component <a href="https://t.co/5L8jGXNdsD">pic.twitter.com/5L8jGXNdsD</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/773533342461550592">September 7, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-display-inline-block">
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Using the boundary feature of the Drop component in UIkit 3 you can easily center a dropdown to the navbar <a href="https://t.co/cXMtn5gnxM">pic.twitter.com/cXMtn5gnxM</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/773150788008943616">September 6, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-display-inline-block">
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The navbar dropdown can easily be centered. Thanks to the new UIkit 3 drop component! <a href="https://t.co/rcGAVoWQhA">pic.twitter.com/rcGAVoWQhA</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/772784563231817728">September 5, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Drop</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The new UIkit 3 Drop component allows you to drop things. In every direction. To any given boundary. Easy. 🏄 <a href="https://t.co/2bO3R7f7Mc">pic.twitter.com/2bO3R7f7Mc</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/771689994486476804">September 2, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Transition</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">UIkit 3 will have new, universal transition component (replacing the old overlay) <a href="https://t.co/oREyE4F0sh">pic.twitter.com/oREyE4F0sh</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/771301328559738880">September 1, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Spinner</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">UIkit 3 will have a new, smooth spinner component based 💯 on CSS <a href="https://t.co/d9rwBiJ2GH">pic.twitter.com/d9rwBiJ2GH</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/770982263588880384">August 31, 2016</a></blockquote>
                    </div>
                </div>

                <div class="uk-text-center">
                    <div class="uk-margin uk-position-relative uk-display-inline-block">
                        <div class="uk-text-large tm-position">Announcement</div>
                        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">We just announced UIkit 3! <a href="https://t.co/eb3C20MnU8">https://t.co/eb3C20MnU8</a> <a href="https://t.co/7aSoJir7vk">pic.twitter.com/7aSoJir7vk</a></p>&mdash; UIkit (@getuikit) <a href="https://twitter.com/getuikit/status/770594002437627904">August 30, 2016</a></blockquote>
                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="https://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="https://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="https://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br class="uk-hidden-small">Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{ multiple: true }">
                    <li class="uk-parent"><a href="#">Documentation</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">Get started</a></li>
                            <li><a href="documentation_how-to-customize.html">How to customize</a></li>
                            <li><a href="documentation_layouts.html">Layout examples</a></li>
                            <li><a href="core.html">Core</a></li>
                            <li><a href="components.html">Components</a></li>
                            <li><a href="documentation_project-structure.html">Project structure</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass files</a></li>
                            <li><a href="documentation_create-a-theme.html">Create a theme</a></li>
                            <li><a href="documentation_create-a-style.html">Create a style</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">Javascript</a></li>
                            <li><a href="documentation_custom-prefix.html">Custom prefix</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> Defaults</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">Base</a></li>
                            <li><a href="print.html">Print</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">Grid</a></li>
                            <li><a href="panel.html">Panel</a></li>
                            <li><a href="block.html">Block</a></li>
                            <li><a href="article.html">Article</a></li>
                            <li><a href="comment.html">Comment</a></li>
                            <li><a href="utility.html">Utility</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">Cover</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">Nav</a></li>
                            <li><a href="navbar.html">Navbar</a></li>
                            <li><a href="subnav.html">Subnav</a></li>
                            <li><a href="breadcrumb.html">Breadcrumb</a></li>
                            <li><a href="pagination.html">Pagination</a></li>
                            <li><a href="tab.html">Tab</a></li>
                            <li><a href="thumbnav.html">Thumbnav</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> Elements</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">List</a></li>
                            <li><a href="description-list.html">Description list</a></li>
                            <li><a href="table.html">Table</a></li>
                            <li><a href="form.html">Form</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">Button</a></li>
                            <li><a href="icon.html">Icon</a></li>
                            <li><a href="close.html">Close</a></li>
                            <li><a href="badge.html">Badge</a></li>
                            <li><a href="alert.html">Alert</a></li>
                            <li><a href="thumbnail.html">Thumbnail</a></li>
                            <li><a href="overlay.html">Overlay</a></li>
                            <li><a href="text.html">Text</a></li>
                            <li><a href="column.html">Column</a></li>
                            <li><a href="animation.html">Animation</a></li>
                            <li><a href="contrast.html">Contrast</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">Dropdown</a></li>
                            <li><a href="modal.html">Modal</a></li>
                            <li><a href="offcanvas.html">Off-canvas</a></li>
                            <li><a href="switcher.html">Switcher</a></li>
                            <li><a href="toggle.html">Toggle</a></li>
                            <li><a href="scrollspy.html">Scrollspy</a></li>
                            <li><a href="smooth-scroll.html">Smooth scroll</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Components</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">Dynamic Grid</a></li>
                            <li><a href="grid-parallax.html">Parallax Grid</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">Dotnav</a></li>
                            <li><a href="slidenav.html">Slidenav</a></li>
                            <li><a href="pagination-js.html">Dynamic Pagination</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">Form advanced</a></li>
                            <li><a href="form-file.html">Form file</a></li>
                            <li><a href="form-password.html">Form password</a></li>
                            <li><a href="form-select.html">Form select</a></li>
                            <li><a href="placeholder.html">Placeholder</a></li>
                            <li><a href="progress.html">Progress</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">Lightbox</a></li>
                            <li><a href="autocomplete.html">Autocomplete</a></li>
                            <li><a href="datepicker.html">Datepicker</a></li>
                            <li><a href="htmleditor.html">HTML editor</a></li>
                            <li><a href="slider.html">Slider</a></li>
                            <li><a href="slideset.html">Slideset</a></li>
                            <li><a href="slideshow.html">Slideshow</a></li>
                            <li><a href="parallax.html">Parallax</a></li>
                            <li><a href="accordion.html">Accordion</a></li>
                            <li><a href="notify.html">Notify</a></li>
                            <li><a href="search.html">Search</a></li>
                            <li><a href="nestable.html">Nestable</a></li>
                            <li><a href="sortable.html">Sortable</a></li>
                            <li><a href="sticky.html">Sticky</a></li>
                            <li><a href="timepicker.html">Timepicker</a></li>
                            <li><a href="tooltip.html">Tooltip</a></li>
                            <li><a href="upload.html">Upload</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                    <li><a href="tutorials.html">Tutorials</a></li>
                    <li><a href="uikit3.html">UIkit 3</a></li>
                </ul>

            </div>

        </div>

        <script type="text/javascript">

            function CheckForm(f) {

                var email_re = /[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;

                if (!email_re.test(f.email.value)) {
                    alert("Please enter your email address.");
                    f.email.focus();
                    return false;
                }

                var fname = "CustomFields_1_1";
                var fld = document.getElementById(fname);
                if (fld.value == "") {
                    alert("Please enter a value for field Name");
                    fld.focus();
                    return false;
                }

                return true;
            }

        </script>

        <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

    </body>
</html>
